<template>
  <!-- 我申报的金融产品 -->
  <div class="layout">
    <ContainerTitle text="我申报的金融产品"></ContainerTitle>

    <div class="msgDiv">
      <el-table
        :data="myDeclareFinanceProduct"
        style="width: 100%"
        min-height="400"
        :border="true"
        :header-cell-style="{ background: '#F4F4F4', color: '#045DB9' }"
      >
        <el-table-column
          prop="productTitle"
          label="金融产品标题"
          width="220"
        >
        </el-table-column>
        <el-table-column label="申报期限" width="200">
          <template slot-scope="scope">
            {{ scope.row.applyStartTime }}至{{ scope.row.applyEndTime }}
          </template>
        </el-table-column>
        <el-table-column label="金融产品类型" width="120">
          <template slot-scope="scope">
            <span>{{
              $selectDict(productList, scope.row.type).dictLabel
            }}</span>
          </template>
        </el-table-column>

        <el-table-column label="申请对象" width="100">
          <template slot-scope="scope">
            <span>{{
              $selectDict(objectList, scope.row.object).dictLabel
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="applyTime" label="申请时间" width="100">
        </el-table-column>
        <el-table-column label="发文部门" width="100">
          <template slot-scope="scope">
            <span>{{
              $selectDict(departmentList, scope.row.publishDepartment)
                .dictLabel
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="100">
          <template slot-scope="scope">
            <span
              :style="
                scope.row.stateName == '审核通过'
                  ? 'color:#10a217'
                  : scope.row.stateName == '审核未通过'
                  ? 'color:#d00000'
                  : ''
              "
            >
              {{ scope.row.stateName }}
            </span>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="120" fixed="right">
          <template slot-scope="scope">
            <span class="rowBtn" @click="toDetail(scope.row)">查看</span>
            <span
              class="rowBtn"
              v-if="
                scope.row.delFlag == 0 &&
                scope.row.stateName == '审核未通过'
              "
              @click="toEdit(scope.row)"
              >编辑</span
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { getApplyDList } from "@/common/api/company.js";

export default {
  data() {
    return {
      name: "finance",
      currentPage: 1,
      pageSize: 10,
      total: 0,
      crumbs: [
        {
          label: "企业空间",
          value: "company",
        },
        {
          label: "金融服务",
          value: "finance",
        },
        {
          label: "我申报的金融产品",
          value: "",
          choose: true,
        },
      ],
      myDeclareFinanceProduct: [],

      objectList: [],
      departmentList: [],
      status: [],

      productList: [],
    };
  },
  mounted() {
    this.getDict();
    this.getList();
  },
  methods: {
    async getList() {
      let res = await getApplyDList({ pageNum: this.currentPage, pageSize: this.pageSize });
      if (res.code == 200) {
        this.myDeclareFinanceProduct = res.rows;
        this.total = res.total;
        console.log(this.myDeclareFinanceProduct);
      }
    },
    // 字典
    async getDict() {
      // 调用公共方法中的查询字典表
      this.getDictList(this,`finance_product_type,finance_product_object,finance_publish_department`).then(res => {
        this.productList = res.finance_product_type;
        this.objectList = res.finance_product_object;
        this.departmentList = res.finance_publish_department;
      })
    },

    // 去详情
    toDetail(row) {
      this.$router.push({
        path: "myDeclareFinanceProductDetail",
        query: { productId: row.applyId },
      });
    },
    // 去编辑
    toEdit(row) {
      this.$router.push({
        name: "myDeclareFinanceProductDetail",
        query: { productId: row.applyId, type: 1 },
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getList();
    },
  },
};
</script>
<style scoped>
.breadcrumb {
  width: 1000px;
  margin: 20px 0;
}

.roomDiv {
  display: flex;
  justify-content: center;
}

.roomDiv .leftDiv {
  width: 200px;
  text-align: left;
}

.roomDiv .rightDiv {
  width: 800px;
  margin-left: 30px;
}
.titleDiv {
  border-bottom: 2px solid #045db9;
  text-align: left;
  padding: 10px;
  font-size: 20px;
  font-weight: bold;
  color: #045db9;
  margin-bottom: 20px;
}

.layout {
  min-height: 100vh;
  position: relative;
  padding-bottom: 150px;
  box-sizing: border-box;
}

.msgDiv {
  margin: 40px 0;
}

.block {
  margin-top: 14px;
  text-align: right;
}

.rowBtn {
  margin-right: 12px;
  cursor: pointer;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
}
</style>